<template>
    <div class="moduleUserAttr">
        <!-- <div class="attr_list" v-for="(item, index) in attrData" :key="index" v-if="index < maxLength">
            <img :src="item.share_user_picture" alt>
        </div>
		<div class="attr_list" v-if="isShowMore">
			<img :src="`${constant.imgUrl}design/more.png`" alt>
		</div> -->
    </div>
</template>
<script>
export default {
	name: 'user-attr',
	data() {
		return {
			constant: this.$constant
		}
	},
	props: {
		attrData: {
			type: Array,
			required: false,
			default: () => {
				return [
					{
						share_user_picture: 'https://www.meijiabang.com/storage/data/images_user/59422b1c24cbd.jpg'
					},
					{
						share_user_picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190725/42_5d39360137738.png'
					},
					{
						share_user_picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190724/157_5d38009aad90f.png'
					},
					{
						share_user_picture: 'https://www.meijiabang.com/storage/hkds/uploads/20190517/108_5cde1ddb3bd94.png'
					}
				]
			}
		},
		maxLength: {
			type: Number,
			default: 6
		},
		isShowMore: {
			type: Boolean,
			default: false
		}
	}
}
</script>

<style lang="scss" scoped>

.moduleUserAttr {
    @include disFlexCen();
    padding-left: 8px;
    .attr_list {
        width: 40px;
        height: 40px;
        margin-left: -8px;
        img {
            border-radius: 50%;
        }
    }
    img {
        width: 100%;
        height: 100%;
    }
}
</style>
